<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../js/myQuery.js"></script> -->
    <script src="../js/jquery-3.7.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            margin-top: 20px;
        }

        #title {
            line-height: 60px;
            font-size: 32px;
            /* background: none;
            background-color: transparent; */
        }

        .list li {
            line-height: 40px;
            border: 1px dashed #333;
            text-indent: 10px;
        }

        .active {
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2 id="title">标题</h2>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
    <p>
        <button class="setHtml">设置html</button>
        <button class="getHtml">获取html</button>
        <button class="hide">hide</button>
        <button class="show">show</button>
        <button class="setCss">设置css</button>
        <button class="getCss">获取css</button>
        <button class="setWidth">设置Width</button>
        <button class="getWidth">获取Width</button>
        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="addClass">addClass</button>
        <button class="removeClass">removeClass</button>
        <button class="hasClass">hasClass</button>
        <button class="eq">eq</button>
        <button class="siblings">siblings</button>
        <button class="chain">链式操作</button>
    </p>
</body>
<script>






    // jquery  =>  write less , do more
    $(".setHtml").click(function () {
        $(".list li").text("123123");
    })

    $(".getHtml").click(function () {
        alert($(".list li").text());
    })

    $(".hide").click(function () {
        $(".list li").hide();
    })

    $(".show").click(function () {
        $(".list li").show();
    })

    $(".setCss").click(function () {

        // css(cssKey,cssVal) =>每次调用方法只能设置一个, 如果需要同时设置多个css属性=>麻烦
        // $(".list li").css("width", "200px");
        // $(".list li").css("height", "200px");
        // $(".list li").css("background-color", "red");

        // 优化: 每次设置css时,css属性名和属性值都以键值对形式存在 => 可以传入一个对象参数
        $(".list li").css({
            width: "200px",
            height: "200px",
            backgroundColor: "red",
        })

    })

    $(".getCss").click(function () {
        alert($(".list li").css("width"));
    })


    $(".setWidth").click(function () {
        console.log(1111);
        // $(".list li").width("200px");
        $(".list li").width(200);
    })

    $(".getWidth").click(function () {
        alert($(".list li").width());
    })

    $(".attr").click(function () {
        // html属性
        $(".list li").attr("class", "one two three");
        $(".list li").attr("title", "hello");
        $(".list li").attr("data-msg", "world");
    })

    $(".prop").click(function () {
        // 元素节点的内置属性  ele.className  ele.clientWidth
        $(".list li").prop("className", "one two three");
        $(".list li").prop("title", "hello");
    })


    $(".addClass").click(function () {
        $(".list li").addClass("one two three four five")
    })

    $(".removeClass").click(function () {
        $(".list li").removeClass("one three five")
    })

    $(".hasClass").click(function () {
        alert($(".list li").hasClass("one"))
    })

    $(".eq").click(function () {
        console.log($(".list li").eq(1));
        $(".list li").eq(1).css({ backgroundColor: "red" });
    })

    $(".siblings").click(function () {
        console.log($(".list li").eq(1));
        console.log($(".list li").eq(1).siblings());
        $(".list li").eq(1).siblings().css({ backgroundColor: "blue" });
    })

    $(".chain").click(function () {
        // 链式操作前提: 调用方法后返回值还是相同类型的数据 (原本的/新的)
        // 小技巧: 除取值操作外,其他方法都返回实例化对象,可以继续链式调用 GetEle.prototype上的方法
        $(".list li").eq(1).html("123123").width(200).height(200).css({ backgroundColor: "red" }).siblings().html("asdasd").width(100).height(100).css({ backgroundColor: "blue" });
    })


    $(".list li").click(function () {

        // $(".list li").css("backgroundColor", "transparent");  // 先取出所有li的样式
        // $(this).css("backgroundColor", "red"); // 把当前li变为红色

        // $(this).addClass("active"); // 被点击的li变为活跃状态
        // $(this).siblings().removeClass("active");  // 除被点击li以外的同级元素  清除活跃状态

        $(this).addClass("active").siblings().removeClass("active");
    })
</script>

</html>